<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>微光协同办公平台-会议列表</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>

</head>

<body onload="init()">
<div class="col-sm-12" style="height: 30px;"></div>
<div class="col-sm-12">
    <!-- Example Events -->
    <div class="example-wrap">
        <div class="example">

            <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                <button type="button" class="btn btn-outline btn-default" onclick="add()">
                    <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                </button>
                <button type="button" class="btn btn-outline btn-default" onclick="change()">
                    <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                </button>
                <button type="button" class="btn btn-outline btn-default" onclick="del()">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                </button>
            </div>
            <form id="form" method="post" action="">
                <table id="exampleTableEvents" data-height="400" data-mobile-responsive="true">
                    <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true"></th>
                        <th data-field="roomId">ID</th>
                        <th data-field="roomUsedStart">会议室开始时间</th>
                        <th data-field="roomUsedEnd">会议室结束时间</th>
                        <th data-field="userId">使用者</th>
                        <th data-field="roomSize">大小</th>
                        <th data-field="roomAddress">地点</th>
                        <th data-field="roomPerson">容纳人数</th>
                        <th data-field="roomDescription">描述</th>
                    </tr>
                    </thead>
                </table>
            </form>
        </div>
    </div>
    <!-- End Example Events -->
</div>

</body>
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>

<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>

 <!--layer-->
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script th:src="@{/js/jquery.form.js}"></script>

<!-- Peity -->
<script th:inline="javascript">
    function init() {
        var newVar = [[${roomList}]];
        $('#exampleTableEvents').bootstrapTable({
            data: newVar,
            search: true,
            pagination: true,
            showRefresh: true,
            height: 500,
            showToggle: true,
            showColumns: true,
            iconSize: 'outline',
            toolbar: '#exampleTableEventsToolbar',
            icons: {
                refresh: 'glyphicon-repeat',
                toggle: 'glyphicon-list-alt',
                columns: 'glyphicon-list'
            }
        });
    }

    function add() {
        //iframe层
        //parent.layer.open
        layer.open({
            type: 2,
            title: '会议室添加',
            shadeClose: true,
            shade: false,
            area: ['500px', '80%'],
            content: '/toAddRoom' //iframe的url
        });
    }

    function change() {
        //iframe层
        //parent.layer.open
        var count = $("input[name='btSelectItem']:checked").length;
        if(count!=1){
            layer.msg("请选择一条信息！");
            return;
        }
        var boxid=$("input[name='btSelectItem']:checked").closest("tr").find("td:eq(1)").text();
        var form = $("#form").get(0);

        $.ajax({
            type:"post",
            data:{"roomId":boxid},
            url:"/toEditRoom",
            success:function (data) {
                layer.open({
                    type: 2,
                    title: '会议室修改',
                    shadeClose: true,
                    shade: false,
                    area: ['500px', '80%'],
                    content: '/toEditRoom', //iframe的url
                })
            }
        })
    }
    function del() {
        var delArray=[];
        $('input[name="btSelectItem"]:checked').each(function(){
            delArray.push($(this).closest("tr").find("td:eq(1)").text());
        });
        $.ajax({
            type:"get",
            data:{"delInfo":delArray},
            url:"/delRoom",
            traditional:true,
            contentType:'json',
            success:function (data) {
                if(data=="成功"){
                    layer.msg("删除"+data);
                    setTimeout(function () {
                        location.reload();
                    },1000)
                }else {
                    layer.msg("删除失败，至少选择一条信息！");
                }
            }
        });
    }
</script>
</html>